{include file="common/header-top" /}

<style>
    .help-item-block{

    }
    .help-item-block .van-grid-item__content{
        background-color: #f9fcfa;
        padding: 4px 4px;
    }
    .help-item-block .van-grid-item__content .ven-cell{
        padding: 7px 15px;
    }
</style>


<div id='app' v-cloak>

    <van-nav-bar
            title="帮助中心"
            left-arrow
            @click-right=""
            @click-left="goBack"
    >
        <van-icon
                name="/__FRONT__/images/icon/news-more.png"
                slot="right"
                @click="goNewsList"
                size="25"
        >
        </van-icon>
    </van-nav-bar>


    <van-row style="margin-top: 15px;">
        <van-col span="24">
            <van-grid :column-num="2"  :gutter="25">

                <van-grid-item
                    class="help-item-block"
                    v-for="item in helpNewsList"
                    :url="getNewsDetailUrl(item)"
                >
                    <van-cell  slot="default">
                        <van-icon
                                :name="getNewsCover(item)"
                                slot="icon"
                                size="50px"
                                style="margin-right: 10px;"
                        ></van-icon>
                        <span
                            slot="title"
                            class="van-multi-ellipsis--l2"
                        >{{item.title}}</span>
                    </van-cell>
                </van-grid-item>

            </van-grid>
        </van-col>
    </van-row>



    <van-row>
        <van-cell>
            <van-image src="/__FRONT__/images/icon/apply-process.png"></van-image>
        </van-cell>
    </van-row>

    {include file="common/foot-bar" /}

</div>





<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                active:3,
                userCenterIcon: {
                    normal: '/__FRONT__/images/icon/usercenter-n.png',
                    active: '/__FRONT__/images/icon/usercenter-a.png'
                },
                erShouIcon: {
                    normal: '/__FRONT__/images/icon/ershou-n.png',
                    active: '/__FRONT__/images/icon/ershou-a.png'
                },

                helpNewsList: [],

            }
        },

        created(){

            this.getHelpNewsList();

        },

        computed:{
        },

        methods:{

            //返回上一页
            goBack(){
                history.back();
            },

            getNewsCover(item){
                if (item.cover) {
                    return item.cover;
                }
                return '/__FRONT__/images/icon/news-default-cover.png';
            },
            getNewsDetailUrl(item){
                return  '/index/News/newsDetail?id=' + item.id;
            },

            getHelpNewsList(){
                axiosRequest.get('/api/news/helpList').then(function (response) {
                    if (response.code == 200) {
                        vm.$data.helpNewsList = response.data;
                    } else {
                        vant.Toast('系统开小差啦！');
                    }
                });
            },


            goNewsList(){
                window.location.href = '/index/News/newsList?typeId=' + "{$typeInfo.id}";
            },


        }
    });




</script>

{include file="common/foot-bottom" /}
